

//if node position exceed canvas boundaries, resize 4 canvases
//if resize window, resize widths of 4 canvases
//all containers and SVG should have the same width
//goals and premise container have variable heights based on how much is in them
//arguments container and SVG have same heights (and widths)

//I want the goals and premises to always be centered no matter where you scroll the screen horizontally
//I don't think goals and premises should be always in the same position vertically, because
	//it would be nice to be able to get them out of the way when you want more space for the arguments section
	//however, it might be better to just allow goals and premises to be minimized

//even though SVG canvas is inside argumentsContainer, since elements will be displayed outside of div, 
	//don't need to resize arguments container
//SVG elements and argumentsContainer elements will have different coordinate systems, but the SVG
	//currentTranslate should make that different invisible
	
//order:
//resize svg canvas

//shift left boundaries of SVG element left, and compensate by changing currentTranslate right
//also increase size by same amout that shift left




function windowInit(){
	
	//cursor never text selector
	$( "*" ).disableSelection();
	
	//for window resizing
	window.allWidth = window.innerWidth + "px";
	window.argumentAreaHeight = window.innerHeight - 130 + "px";
	
	window.fruitsContainer = document.getElementById("fruitsContainer");
	window.goalsContainer = document.getElementById("goalsContainer");
	window.premisesContainer = document.getElementById("premisesContainer");
	window.argumentsContainer = document.getElementById("argumentsContainer");
	
	
	fruitsContainer.style.width = ((window.innerWidth/2) - 140 - 6) + "px";  //140 is the left padding, set in style
		//not sure why I need that other 8px...why it is too wide
	goalsContainer.style.width = ((window.innerWidth/2) - 132) + "px";  //132 is the left padding, set in style
	goalsContainer.style.left = (window.innerWidth/2) + "px";
	premisesContainer.style.width = window.innerWidth - 183 + "px";  //the 183 is the left padding
	argumentsContainer.style.width = window.innerWidth + "px";

	argumentAreaHeight = window.innerHeight - 154 + "px";  //used more than once

	argumentsContainer.style.height = argumentAreaHeight;
	
	//SVG//////////////////////////
	//make svg canvas/element
            window.paper = Raphael(0, 0, 320, argumentAreaHeight);  //SVG height is set in style.css to 100%
            //move it to within argumentsContainer
            window.svgElement = document.getElementsByTagName('svg')[0];
            svgElement.style.height = argumentAreaHeight;
            argumentsContainer.appendChild(svgElement);

	//testing area
	//svgElement.style.left = 200;
	//svgElement.currentTranslate.x = -200;
	//console.dir(svgElement);
	
	//find out position of mouse cursor
	handlers.logMousePos =  function (){logMousePos(event) };
		document.addEventListener('click', handlers.logMousePos, false );
	
}

function mousePos(e){
	mouseX = e.clientX;
	mouseY = e.clientY;
}

//hold control and click somewhere to get the mouse position for that spot
function logMousePos(event){
	if(event.ctrlKey)
	{
		event.preventDefault();
		alert("X: " + event.pageX + "\nY: " + event.pageY);
	}
}

function adjustXBoundaries (div) {

	//if adoptee too far right, grow canvas by amount exceeded
	//same for left, but with shifting start position of canvas and then translating everything in it right 
		//that amount
	
	//test right
		if(!window.oldRightest)
		{
			window.oldRightest = claim.left + claim.widthTotal;
		}
		
		//find right most node
		var rightestNode = claim;
		while(rightestNode.children.length > 0)
		{
			rightestNode = rightestNode.children[(rightestNode.children.length - 1)];
		}
		
		var rightest = rightestNode.left + rightestNode.widthTotal;

		var rightShift = rightest - oldRightest; 
		
		if(rightShift > 0)
		{
			//if rightestNode is beyond SVG canvas boundaries
			if( rightest > (svgElement.offsetWidth - (-svgElement.offsetLeft) ) ){
				//make canvas bigger
				svgElement.style.width = svgElement.offsetWidth + rightShift + "px";
			}
			
			oldRightest = rightest;
		}
	
	//test left - more complicated since have to move canvas then shift everything
	
		if(!window.oldLeftest)
		{
			window.oldLeftest = claim.left;
		}
		
		//find left most node
		var leftestNode = claim;
		while(leftestNode.children[0])
		{
			leftestNode = leftestNode.children[0];
		}
		
		var leftest = leftestNode.left;
		var leftShift = oldLeftest - leftest;
		if(leftest < oldLeftest)
		{
		
			if ( leftest < 0)  //less than zero means left of left most boundary of canvas
			{
				
				//shift containers to the right, then move scroll correct amount
									
				//make canvas wider by "leftShift" amount
				svgElement.style.width = svgElement.offsetWidth + leftShift + "px";
				
				//translate everything on SVG canvas right by that amount
				svgElement.currentTranslate.x = svgElement.currentTranslate.x + leftShift;
				
				//move SVG container left by "leftShift" amount
				svgElement.style.left = svgElement.offsetLeft - leftShift + "px";

				//translate containers right by that amount
				argumentsContainer.style.left = argumentsContainer.offsetLeft + leftShift + "px";
				
			}
			
			oldLeftest = leftest;
		
		}
		
		return leftShift;
		
}

function adjustYBoundaries(div)
{

	if (!lowest)
	{
		var lowest = 0;  //lowest is actually the offsetTop
	}
	
	if( div.offsetTop > lowest){
		lowest = div.offsetTop;
		div.parentElement.style.height = lowest + 120 + "px";	
		svgElement.style.height = lowest + 120 + "px";	
	}
	
	//set div height to be 30px taller than lowest

}

function scrollYDiv(div, leftShift){
	
	//"div" is node that was just created
 	//the current bottom of the page is the height of the users window + pageYoffset
 	//depending on how you measure, you may have to subtract the height of the top sections
 	
 	var bottom = div.offsetTop + 50 + div.parentElement.offsetTop + 15;  //I don't know why
 	// the parentElement.offsetTop is not matching with the mouse position, but that is why 15 is required
 	//bottom is number of pixels from top of entire page
 	
 	//if bottom - scroll position is greater than screen height, scroll down by the difference
 	var scrollNeeded = bottom - (currentYScroll + window.outerHeight); //for some reason need extra 15

	
 	//scroll X here too
 	//if not in window, center on it
 	var offset = currentXScroll;
 	var left = div.offsetLeft - svgElement.offsetLeft;
 	var xScrollTo = offset;
 	
 	//window box is current x scroll to (currentXScroll + window width)
 	if (left < offset || (left + 220) > (offset + window.outerWidth) )
 	{
 		xScrollTo = left - 250;
 	}else
 	{//don't appear to scroll, but for that need to compensate for leftShift if it ocurred
	 	xScrollTo += leftShift; 
 	}
 	
 	window.scrollTo(xScrollTo, scrollNeeded + currentYScroll + 100);
	
}